import React, { useState, useEffect } from 'react';
import { connect, useDispatch } from 'umi';
import { message, Button, Table, Input, Select, Form, Row, Col } from 'antd';
import styles from './index.less';

const layout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};

const RolePage = (props) => {
  const {
    authActManageModel,
    loading: { effects },
    setRoleCode,
    roleCode,
    appCodeOfSelect,
  } = props;
  const { roleList, roleListTotal } = authActManageModel;
  const dispatch = useDispatch();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [pageIndex, setpageIndex] = useState(1);
  const [pageSize, setpageSize] = useState(7);
  const [form] = Form.useForm();
  const [formData, setFormData] = useState({});

  // useImperativeHandle(ref, () => ({
  //   handleSubmit,
  // }));

  useEffect(() => {
    if (roleCode) {
      setSelectedRowKeys([roleCode]);
    } else {
      setSelectedRowKeys([]);
    }
    return () => {};
  }, [roleCode]);

  useEffect(() => {
    if (!appCodeOfSelect) return;
    dispatch({
      type: 'authActManageModel/getRoleList',
      payload: { pageIndex, pageSize, appCode: appCodeOfSelect, ...formData },
    });
    return () => {};
  }, [pageIndex, pageSize, formData, appCodeOfSelect]);

  useEffect(() => {
    setRoleCode('');
    return () => {};
  }, [appCodeOfSelect]);

  const handleSearch = () => {
    const { validateFields } = form;
    validateFields().then((values) => {
      const param = { ...values };
      setFormData(param);
      setpageIndex(1);
    });
  };

  const handleReset = () => {
    form.resetFields();
    setpageIndex(1);
    setFormData({});
  };

  const onSelectChange = (rowKeys) => {
    setSelectedRowKeys(rowKeys);
    setRoleCode(rowKeys[0]);
  };

  const onRowClick = (rows) => {
    setSelectedRowKeys([rows.roleCode]);
    setRoleCode(rows.roleCode);
  };

  const rowSelection = {
    type: 'radio',
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // const handleTableChange = (pagination, filters, sorter) => {
  //   setCurrent(pagination.current);
  // };
  const columns = [
    {
      title: '名称',
      dataIndex: 'roleName',
      key: 'roleName',
      ellipsis: false,
    },
    {
      title: '编码',
      dataIndex: 'roleCode',
      key: 'roleCode',
      ellipsis: false,
    },
    {
      title: '类型',
      dataIndex: 'roleType',
      key: 'roleType',
      ellipsis: false,
      render: (text) => (text === 1 ? '组织角色' : '公共角色'),
    },
    {
      title: '组织',
      dataIndex: 'orgList',
      key: 'orgList',
      ellipsis: false,
      render: (text) => text && text.length > 0 && text[0].orgName,
    },
    {
      title: '描述',
      dataIndex: 'roleDesc',
      key: 'roleDesc',
      ellipsis: true,
    },
  ];

  return (
    <div className={styles.root}>
      <div className={styles.menuTitleWrapper}>
        <Form {...layout} form={form} name="advanced_search" style={{ width: '100%' }}>
          <Row>
            <Col span={12}>
              <Form.Item name="roleType" label="角色类型">
                <Select placeholder="请选择" style={{ width: '90%' }} allowClear>
                  <Select.Option value={0}>公共角色</Select.Option>
                  <Select.Option value={1}>组织角色</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="roleName" label="角色名称">
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="roleCode" label="角色编码">
                <Input placeholder="请输入" maxLength="6" style={{ width: '90%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={0} wrapperCol={24}>
                <Button style={{ marginLeft: 10 }} type="primary" onClick={handleSearch}>
                  查询
                </Button>
                <Button style={{ marginLeft: 16 }} onClick={handleReset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
      <div className={styles.menuTable}>
        <Table
          onRow={(record) => {
            return {
              onClick: () => onRowClick(record),
            };
          }}
          rowSelection={rowSelection}
          rowKey="roleCode"
          columns={columns}
          dataSource={roleList}
          size="small"
          pagination={{
            total: roleListTotal,
            pageSize,
            current: pageIndex,
            showSizeChanger: true,
            pageSizeOptions: [5, 7, 10, 50],
            size: 'small',
            onChange: (page) => {
              setpageIndex(page);
            },
            onShowSizeChange: (_, pageSize) => {
              setpageSize(pageSize);
            },
          }}
          scroll={{ y: 260 }}
          // onChange={handleTableChange}
          loading={effects['authActManageModel/getRoleList']}
        />
      </div>
    </div>
  );
};

export default connect((state) => state)(RolePage);
